<template>
  <div class="singer">
    <transition
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <router-view></router-view>
    </transition>
    <van-index-bar :index-list="indexList">
      <div v-for="(item, index) in list" :key="index">
        <van-index-anchor :index="item.Fidx">{{ item.Fidx }}</van-index-anchor>
        <ul>
          <li
            @click="jump(liItem)"
            v-for="liItem in item.singers"
            :key="liItem.Fsinger_mid"
          >
            <div class="left">
              <!-- <img :src="liItem.singerPic" /> -->
              <img v-lazy="liItem.singerPic" />
            </div>
            <div class="right">{{ liItem.Fsinger_name }}</div>
          </li>
        </ul>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import { getSingerList } from "./service";
import { handSingerList } from "./index";
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    indexList() {
      return this.list.map((item) => item.Fidx);
    },
  },
  methods: {
    jump(item) {
      const { Fsinger_name, Fsinger_mid } = item;
      // 003CoxJh1zFPpx
      this.$router.push(`/singer/detail/${Fsinger_mid}?name=${Fsinger_name}`);
    },
    async getSingerData() {
      const { code, data } = (await getSingerList()) || {};

      if (code) return false;
      let list = data?.list || [];
      this.list = handSingerList(list);
    },
  },
  created() {
    this.getSingerData();
  },
  /*
 1. 根据数据显示页面
    * 列表显示
    * 索引显示
 2. 列表滚动索引跟着动
    索引控制列表滚动
  {}
  {
    x: [{},{}],
    z: [{}]
  }
滚动的实现
1.overflow：scroll
2.添加滚动监听
3.scrollTop的距离判断

*/
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.singer {
  overflow: scroll;
  background: @bg-black;
  position: fixed;
  .top(88);
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  // /deep/ .van-index-anchor {
  //   color: red;
  // }
  ::v-deep .van-index-anchor {
    color: green;
  }
  li {
    .h(70);
    .w(375);
    .padding(20,0,0,30);
    box-sizing: border-box;
    display: flex;
    .left {
      .w(50);
      .h(50);
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// .animate__animated.animate__fade {
//   --animate-duration: 10s;
// }
:root {
  --animate-duration: 10s;
  // --animate-delay: 0.9s;
}
</style>
